<script lang="ts" setup >
import { ILoginRuleForm } from "@/interface/ILoginRuleForm";
import { IUser } from "@/interface/IUser";
import { ref, onMounted } from 'vue'
import MyComponent from "@/components/MyComponent";
import { IResult } from "@/interface/IResult";
import { CUser } from "@/classes/CUser";

type Item = { id : number; name : string; }
const data = ref<Array<Item>>( [  // 定义要传递的data数组
  { id : 1, name : '示例数据1' },
  { id : 2, name : '示例数据2' }
]);
console.log( data.value );

const isItem = ( item : Item ) : item is Item => {
  return typeof item === 'object';
};

// 接收数组
const handleArrReceived = ( arr : IResult ) => {
  if(Array.isArray( arr.data ) &&  arr.data.length > 0 &&  arr.data.every( isItem ) ) {
    // 判断arr.data是否是Item[]数组类型
    arr.data.forEach( item => {
      console.log( item.id, item.name );
    } );
  }
};

const user = new CUser<string | number>( 1, '张三' );
user.setName( "李四" )
console.log( user.toString() );

interface BackPack<Type> {
  name : string;
  add( thing: Type ): void;
  get(): Type;
}

const backPack: BackPack<string> = {
  name: '',
  add( thing: string ): void {
    this.name = thing;
  },
  get(): string {
    return this.name;
  }
};
backPack.add( '1' );
const object = backPack.get();
console.log( "object", object );

interface Point {
  x: number;
  y: number;
  move?( x: number, y: number ): void;
}
const point: Point = {
  x: 1,
  y: 2,
  move( x: number, y: number ) :  void {
    this.x = x;
    this.y = y;
    console.log( this.x, this.y );
  }
}

point.move?.( 3, 4 );

onMounted( () => {

});
</script >

<template >
  <MyComponent :title="'帮助'" :data="data" @change="handleArrReceived" ></MyComponent >
</template >

<style scoped >

</style >